<template>
  <div class="searchIndex">
    <div class="searchBox">
      <van-search v-model="queryStr" left-icon="" background="transparent" show-action :label="searchLabel"
                  placeholder="请输入搜索关键词" @search="onSearch">
        <template #action>
          <div @click="onSearch" class="searchBtn">搜索</div>
        </template>
      </van-search>
    </div>
    <div class="main">
      <!-- 门店 -->
      <div class="shops" v-if="type == 1 && ishowFlag">
        <div class="shopsContet">
          <div class="shopTop">
            <div class="shopInfoItem">
              <i class="iconfont icon icon-biaoqian"></i>
              <span class="val">店名：{{ shopsData.baseInfo.name }}</span>
            </div>
            <div class="shopInfoItem">
              <i class="iconfont icon icon-dizhi"></i>
              <span class="val">地址：{{ shopsData.baseInfo.address }}</span>
            </div>
          </div>
          <div class="shopInfo">
            <div class="shopInfoItem">
              <i class="iconfont icon icon-chengshi"></i>
              <span class="val">城市：{{ shopsData.baseInfo.city }}</span>
            </div>

            <div class="shopInfoItem">
              <i class="iconfont icon icon-diqu"></i>
              <span class="val">区域：{{ shopsData.baseInfo.area }}</span>
            </div>
            <div class="shopInfoItem">
              <i class="iconfont icon icon-fangzi"></i>
              <span class="val">店号：{{ shopsData.baseInfo.code }}</span>
            </div>

            <div class="shopInfoItem">
              <i class="iconfont icon icon-dianchang"></i>
              <span class="val">店长：{{ shopsData.baseInfo.managerName }}</span>
            </div>
          </div>
        </div>
        <ul class="shopsList">
          <li class="shopsListItem" v-for="(item, index) in shopsData.shopList" :key="item.id"
              @click.stop="chooseHandle(index)">
            <div class="logo">
              <img :src="$baseImgUrl + item.pngImg" alt=""/>
            </div>
            <div class="txt">
              <h3>录入日期：{{ item.createTime }}</h3>
              <p>{{ item.name }}</p>
            </div>

            <div class="downLoad" v-if="index === currentIndex">
              <div class="look" @click="imagePreviewHandle($baseImgUrl + item.pngImg, item.certificateId,1)">
                <i class="iconfont icon-chakan"> </i>
              </div>
              <div class="down" @click="downLoadPreviewHandle(item.id, item.certificateId, 2)">
                <i class="iconfont icon-xiazai"></i>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <!-- 商品 -->
      <div class="goods" v-if="type == 2 && ishowFlag">
        <div class="shopsContet">
          <div class="shopTop">
            <div class="shopInfoItem">
              <i class="iconfont icon icon-chengshi"></i>
              <span class="val">商品名称：{{ goodsData.baseInfo.name }}</span>
            </div>
          </div>
          <div class="shopInfo">
            <div class="shopInfoItem">
              <i class="iconfont icon icon-biaoqian"></i>
              <span class="val">商品规格：{{ goodsData.baseInfo.productType }}</span>
            </div>
            <div class="shopInfoItem">
              <i class="iconfont icon icon-diqu"></i>
              <span class="val">商品编码：{{ goodsData.baseInfo.code }}</span>
            </div>
          </div>
        </div>
        <ul class="shopsList">
          <li class="shopsListItem" v-for="(item, index) in goodsData.goodList" :key="item.id"
              @click.stop="chooseHandle(index)">
            <div class="logo">
              <img :src="$baseImgUrl + item.pngImg" alt=""/>
            </div>
            <div class="txt">
              <h3>录入日期：{{ item.createTime }}</h3>
              <p>{{ item.name }}</p>
            </div>

            <div class="downLoad" v-if="index === currentIndex">
              <div class="look" @click="imagePreviewHandle($baseImgUrl + item.pngImg, 2)">
                <i class="iconfont icon-chakan"> </i>
              </div>
              <div class="down" @click="downLoadPreviewHandle(item.id, item.certificateId,  1)">
                <i class="iconfont icon-xiazai"></i>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <!-- 暂无 -->
      <div class="nothing" v-if="!ishowFlag">
        暂时没有查询到相关信息哦~
      </div>
    </div>
    <!-- 预览 -->
  </div>
</template>

<script>
import {saveProductLogs, saveStoreLogs} from "@/api/logs";
import {searchGoodApi, searchShopApi} from '@/api/search.js'

let $baseImgUrl = process.env.VUE_APP_BASE_IMAGE_URL
let $baseUrl = process.env.VUE_APP_DEV_TARGET
export default {
  name: 'SearchIndex',
  data() {
    return {
      baseImgUrl: $baseImgUrl,
      queryStr: '',
      searchLabel: '',
      type: '',
      ishowFlag: false,
      // 店铺
      shopsData: {
        baseInfo: {},
        shopList: [],
      },
      // 店铺
      goodsData: {
        baseInfo: {},
        goodList: [],
      },
      goodsData: {},
      currentIndex: '',
    }
  },
  created() {
    let {type} = this.$route.query
    this.type = type
    this.searchLabel = type === '1' ? '门店名称/编码' : '商品名称/编码'
  },
  methods: {
    onSearch() {
      if (this.type === '1') {
        // 门店
        this.searchShopHandle()
      } else {
        // 商品
        this.searchGoodHandle()
      }
    },
    searchShopHandle() {
      searchShopApi({
        queryStr: this.queryStr,
      }).then((res) => {
        if (res.code === 0) {
          this.shopsData.baseInfo = res.data.store
          this.shopsData.shopList = res.data.detailList
          if (Object.keys(this.shopsData.baseInfo).length > 0 || this.shopsData.shopList.length > 0) {
            this.ishowFlag = true
          }
          this.storeLog(2,'', res.data.store.id);
        } else {
          this.$toast(res.message)
        }
      })
    },
    searchGoodHandle() {
      searchGoodApi({
        queryStr: this.queryStr,
      }).then((res) => {
        if (res.code === 0) {
          this.goodsData.baseInfo = res.data.product
          this.goodsData.goodList = res.data.detailList
          if (Object.keys(this.goodsData.baseInfo).length > 0 || this.goodsData.goodList.length > 0) {
            this.ishowFlag = true
          }
          this.productLog(2, res.data.product.id);
        } else {
          this.$toast(res.message)
        }
        console.log(res, 'searchGoodApi')
      })
    },
    chooseHandle(index) {
      this.currentIndex = index
    },
    imagePreviewHandle(img, certificateId, type) {
      this.$imagePreview([img])
      if (type === 1) {
        this.storeLog(0, certificateId, this.shopsData.baseInfo.id);
      } else {
        this.productLog(0, certificateId, this.goodsData.baseInfo.id);
      }
    },
    downLoadPreviewHandle(id, certificateId, type) {
      window.open(`${$baseUrl}uhome-file-system/api/pc/download/file?id=${id}&type=${type}`)
      if (type === 1) {
        this.storeLog(1, certificateId, this.shopsData.baseInfo.id);
      } else {
        this.productLog(1, certificateId, this.goodsData.baseInfo.id);
      }
    },
    async productLog(type, certificateId, id) {
      saveProductLogs({type: type, certificateId: certificateId, productId: id})
    },
    async storeLog(type, certificateId, id) {
      saveStoreLogs({type: type, certificateId: certificateId, storeId: id})
    }
  },
}
</script>

<style lang="scss">
@import '../assets/styles/color.scss';

.searchIndex {
  width: 100vw;
  min-height: 100vh;
  padding-bottom: 20px;
  background-color: $bg-color;

  .searchBtn {
  }

  .van-search__label {
    color: #9ba2a6;
  }

  .van-search__content {
    border-radius: 6px;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    // box-shadow: 0px 1px 0.5px 1px rgba($color: #000000, $alpha: 0.5);
  }

  .van-search__action {
    margin: 0 10px;
    padding: 0 20px;
    border-radius: 6px;
    font-size: 12px;
    color: #fff;
    background-color: #adcbff;
  }

  .main {
    padding: 0 12px;

    .nothing {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 20px;
      font-size: 14px;
      height: 448px;
      color: #7a8288;
      background-color: #fff;
    }

    .shopsContet {
      margin-bottom: 10px;

      padding: 10px;
      border-radius: 10px;
      color: #828a90;
      background-color: #fff;
      font-size: 14px;

      .shopTop {
        .shopInfoItem {
          display: flex;
          align-items: center;
          padding: 10px 0;

          i {
            margin-right: 10px;
            color: #000;

            &.icon-dizhi {
              margin-right: 8px;
              font-size: 20px;
            }
          }
        }
      }

      .shopInfo {
        display: flex;
        flex-wrap: wrap;

        .shopInfoItem {
          display: flex;
          align-items: center;
          padding: 10px 0;
          width: 50%;

          i {
            margin-right: 10px;
            color: #000;

            &.icon-dizhi {
              margin-right: 8px;
              font-size: 20px;
            }
          }
        }
      }
    }

    .shopsList {
      height: 100%;

      .shopsListItem {
        position: relative;
        padding-bottom: 20px;
        margin-bottom: 10px;
        display: flex;
        background-color: #fff;
        border-radius: 10px;

        .logo {
          padding: 20px;
          margin-right: 10px;
          width: 150px;
          height: 120px;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .txt {
          flex: 1;
          color: #7d858b;

          > h3 {
            padding-top: 10px;
            font-weight: normal;
            font-size: 10px;
          }

          > p {
            margin-top: 20px;
            font-size: 40px;
          }
        }

        .downLoad {
          display: flex;
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          height: 36px;
          background-color: $theme-bg-color;

          > div {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;

            &.look {
              border-right: 4px solid #fff;
            }

            i {
              font-size: 40px;
              color: #fff;
            }
          }
        }
      }
    }
  }
}
</style>
